<template>
  <el-card :bordered="false" class="card-area">
    <!-- 搜索区域 -->
    <el-form :model="queryParams" label-width="68px">
      <div style="display: flex;">
        <el-form-item label="采购单号">
          <el-input v-model="queryParams.num" size="small" placeholder="请输入采购单号"/>
        </el-form-item>
        <el-form-item label="申请人">
          <el-input v-model="queryParams.applicant" size="small" placeholder="请输入申请人"/>
        </el-form-item>
        <!-- <el-form-item label="采购状态">
          <el-select v-model="queryParams.process" clearable>
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item> -->
      </div>
      <span style="float: right; margin: 3px 10px;">
        <el-button type="primary" @click="search" size="mini">查询</el-button>
        <el-button style="margin-left: 8px" @click="reset" size="mini">重置</el-button>
      </span>
    </el-form>
    <div>
      <div class="operator">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="add"
          v-hasPermi="['system:user:add']">新增</el-button>
        <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleDelete('1')"
          v-hasPermi="['system:user:remove']">删除</el-button>
      </div>
      <!-- 表格区域 -->

      <el-table ref="multipleTable" :data="columns" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"  align="center">
        </el-table-column>
        <el-table-column prop="num" label="采购单号" align="center">
        </el-table-column>
        <el-table-column prop="applicant" label="申请人" align="center">
        </el-table-column>
        <el-table-column prop="content" label="采购说明" align="center">
        </el-table-column>
        <el-table-column prop="price" label="预计价格" align="center">
        </el-table-column>
        <!-- <el-table-column prop="process" label="当前流程">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.process === 0">正在采购</span>
              <span v-else>采购完成</span>
            </div>
          </template>
        </el-table-column> -->
        <el-table-column prop="auditStatus" label="审核状态" align="center">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.auditStatus === '0'">待审核</span>
              <span v-else-if="scope.row.auditStatus === '1'">通过</span>
              <span v-else="scope.row.auditStatus === '2'">驳回</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createDate" label="申请时间" align="center">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="edit(scope, 'edit')" type="text" class="el-icon-edit"
              v-if="scope.row.auditStatus !== '1'">编辑 </el-button>
            <el-button size="mini" @click="handleDelete(scope.row)" type="text" icon="el-icon-delete"
              v-if="scope.row.auditStatus !== '1'">删除 </el-button>
            <el-button size="mini" @click="view(scope.row)" type="text"  icon="el-icon-view">查看 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
    <rurchase-add v-if="rurchaseAdd.visiable" @close="handleRurchaseAddClose" @success="handleRurchaseAddSuccess"
      :valInfo="valInfo" :statusType="statusType" :rurchaseAddVisiable="rurchaseAdd.visiable">
    </rurchase-add>
    <rurchase-view v-if="rurchaseView.visiable" @close="handleRurchaseViewClose" :rurchaseShow="rurchaseView.visiable"
      :rurchaseData="rurchaseView.data">
    </rurchase-view>
  </el-card>
</template>

<script>
import RangeDate from '@/components/datetime/RangeDate'
import { mapState } from 'vuex'
import moment from 'moment'
import RurchaseAdd from './RurchaseAdd'
import RurchaseView from './RurchaseView'
import { getPurchaseRequestPage, procureDelete } from '../../../api/base/buyapplay'
import { newSpread, floatForm, floatReset, saveExcel } from '@/utils/spreadJS'
moment.locale('zh-cn')
export default {
  name: 'Rurchase',
  components: { RurchaseView, RurchaseAdd, RangeDate },
  data() {
    return {
      rurchaseAdd: {
        visiable: false,
      },
      rurchaseView: {
        visiable: false,
        data: null
      },
      statusType: {
        data: null
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      loading: false,
      columns: [],
      total: 10,
      options: [
        {
          value: '1',
          label: '正在采购'
        },
        {
          value: '2',
          label: '采购完成'
        },
      ],
      tableList: [],
      ids: [],
      valInfo: {},
    }
  },
  computed: {
    ...mapState({
      currentUser: state => state.account.user
    }),
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleSelectionChange(val) {
      this.ids = val.map(item => item.id)

    },
    add() {
      this.statusType.data = 1
      this.rurchaseAdd.visiable = true
    },
    handleRurchaseAddClose(e) {
      this.valInfo = {}
      if (e === '1') {
        this.rurchaseAdd.visiable = false
        this.getList()
      } else {
        this.rurchaseAdd.visiable = false
      }
    },
    handleRurchaseAddSuccess() {
      this.rurchaseAdd.visiable = false
      this.$message.success('新增采购申请成功')
      this.search()
    },
    edit(record) {
      this.statusType.data = 2
      this.rurchaseAdd.visiable = true
      this.valInfo = record.row
    },
    editClose() {
      this.rurchaseAdd.visiable = false
    },
    handleRurchaseEditSuccess() {
      this.rurchaseAdd.visiable = false
      this.$message.success('修改采购申请成功')
      this.search()
    },
    view(row) {
      this.rurchaseView.data = row
      this.rurchaseView.visiable = true
    },
    handleRurchaseViewClose() {
      this.rurchaseView.visiable = false
    },
    handleDeptChange(value) {
      this.queryParams.deptId = value || ''
    },
    handleDelete(row) {
      const ids = row.id || this.ids;
      if (row === '1') {
        if (!this.ids.length) {
          this.$message.warning('请选择需要删除的记录')
          return
        } else {
          this.$confirm('当您点击确定按钮后，这些记录将会被彻底删除？', '确定删除所选中的记录?', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(function () {
            return procureDelete(ids);
          }).then(() => {
            this.getList();
            this.msgSuccess("删除成功");
          })
        }
      } else {
        // 列表删除
        this.$confirm('当您点击确定按钮后，这些记录将会被彻底删除？', '确定删除所选中的记录?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          return procureDelete(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
      }


    },
    search() {
      this.getList()
    },
    reset() {
      // 重置查询参数
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      }
      // 取消选中
      this.getList()
    },
    async getList() {
      // debugger
      this.loading = true;
      const response = await getPurchaseRequestPage(this.queryParams)
      this.columns = response.rows;
      this.total = response.total;
      this.loading = false;
      try {

      } catch (error) {
        console.log(error)
        this.loading = false;
      }
    }
  },
  watch: {}
}
</script>
<style lang="less" scoped>
.el-form {
  display: flex;
}

::v-deep .el-input__inner {
  // width: 150px;
}

::v-deep .el-form-item {
  margin-left: 10px;
}

@import "../../../../static/less/Common.less";
</style>
